<template>
    <div style="width: 100%">
        <div class="top">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>系统工具</el-breadcrumb-item>
                <el-breadcrumb-item>热点数据</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
    <div id="first">
        <div id="weibo"><weiboCard ></weiboCard></div>
        <div id="baidu"><baiduCard></baiduCard></div>
    </div>
        <div id="second">
            <div id="bilibili"><bilibiliCard></bilibiliCard></div>
            <div id="douban"><doubanCard></doubanCard></div>
        </div>
    </div>
</template>

<script>
    import weiboCard from "../../components/card/weiboCard";
    import baiduCard from "../../components/card/baiduCard";
    import bilibiliCard from "../../components/card/bilibiliCard";
    import doubanCard from "../../components/card/doubanCard";
    export default {
        name: "hotView",
        components:{
            weiboCard,
            baiduCard,
            bilibiliCard,
            doubanCard
        }
    }
</script>

<style scoped>
    #first{

        display: flex;
        height:25em;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
    }
    #second{
        display: flex;
        height:25em;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
    }
    #weibo{
        width: 70%;
    }
    #baidu{
        width: 50%;
    }
    #bilibili{
        width: 70%;
    }
    #douban{
        width: 50%;


    }
    .top{
        margin-bottom: 12px;
    }
</style>
